<template>
  <div class="main">
    <button @click="change">弹窗</button>
    <!-- 弹窗 -->
    <Dialog v-model="show"></Dialog>
    <!-- tabel -->
    <myTable :tabContent="tabContent">
      <template #change="slots">
        <button @click="getItem(slots)">修改</button>
      </template>
      <template #delete="slots">
        <button @click="deleteItem(slots)">删除</button>
      </template>
    </myTable>
  </div>
</template>
<script lang="ts" setup>
import Dialog from '../components/Dialog.vue';
import myTable from '../components/myTable.vue';
import { ref } from 'vue';
const show = ref(false)
const change = () => {
  show.value = !show.value;
}
const handler=(val)=>{
  console.log(val);
  show.value=!val
}
//table
const tabContent=ref([
  {data:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},
  {data:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},
  {data:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},
  {data:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},
  {data:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},
  {data:"2016-05-03",name:"Tom",address:"No. 189, Grove St, Los Angeles"},
])
//点击修改获取当前行的下标
const getItem=(val)=>{
  console.log(val);
  
}
//点击删除获取当前行的下标
const deleteItem=(val)=>{
  
  
}
</script>
